<template>
	<div class="app-container">
	 	  <el-form class="jc_search_wrap" v-model="searchList"> 
				<label>BOM名称：</label><el-input v-model="searchList.bomName"></el-input>
				<label>BOM编号：</label><el-input v-model="searchList.bomNo"></el-input>
				<label>BOM版本：</label><el-input v-model="searchList.bomVersion"></el-input>
	 	  	    <el-button @click="searchRows"><i class="el-icon-search"></i> 查询</el-button>
	            <el-button @click="emptyInputs"><i class="el-icon-close"></i> 清空</el-button>
	 	  </el-form>

	 	  <el-button-group class="jc_btn_wrap jc_btn_left">
		      <el-button @click="createRow"><i class="jc_icon el-icon-plus"></i> 新建</el-button>
		      <el-button @click="editRow"><i class="el-icon-edit"></i> 编辑</el-button>
		      <el-button @click="deleteRow"><i class="el-icon-delete"></i> 删除</el-button>
		  </el-button-group>

		<el-table :height="tableHeight" :data="list"  border fit highlight-current-row  @selection-change="handleSelectionChange" class="jc_table_wrap" >
<!-- 			<el-table-column type="index"  width="50">
			</el-table-column> -->
            <el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="BOM名称">
				<template scope="scope">{{scope.row.bomName}}</template>
			</el-table-column>
			<el-table-column property="bomNo" label="BOM编号">
				<template scope="scope">{{scope.row.bomNo}}</template>
			</el-table-column>
			<el-table-column property="bomVersion" label="BOM版本">
				<template scope="scope">{{scope.row.bomVersion}}</template>
			</el-table-column>
			<el-table-column property="remark" label="备注">
				<template scope="scope">{{scope.row.remark}}</template>
			</el-table-column>
			<el-table-column  property="userName" label="创建人">
				<template scope="scope">{{scope.row.userName}}</template>
			</el-table-column>
			<el-table-column property="createTime" label="创建时间">
				<template scope="scope">{{scope.row.createTime}}</template>
			</el-table-column>
		</el-table> 

		<el-pagination
			@size-change="handleSizeChange"
			@current-change="changePage"
			:current-page="currentPage"
			:page-size="pageSize" 
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>

		<el-table :height="tableHeight" :data="list2"  border fit highlight-current-row class="jc_table_wrap">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="materielTypeName" label="物料种类">  
			</el-table-column>
			<el-table-column prop="materielName" label="物料名称">
			</el-table-column>
			<el-table-column prop="materielNo" label="物料编码">
			</el-table-column>
			<el-table-column prop="materielSupplier" label="供应商">
			</el-table-column>
			<el-table-column prop="materielNorms" label="型号规格">
			</el-table-column>
			<el-table-column prop="materielLevel" label="等级">
			</el-table-column>
			<el-table-column prop="materielNumber" label="物料数量">
			</el-table-column>
			<el-table-column prop="materielUnit" label="物料单位">
			</el-table-column>
			<el-table-column prop="remark" label="备注">
			</el-table-column>
			<el-table-column prop="userName" label="创建人">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
			</el-table-column>
		</el-table>

        <!--新建-->
        <el-dialog title="新建工艺BOM" :visible.sync="create_visible" class="jc_dialog_wrap lkh"
        >
            <el-form :model="form_create" label-width="120px">
                <div class="clearfloat">
                    <el-form-item label="BOM名称">
                        <el-input v-model="form_create.bomName"></el-input>
                    </el-form-item>
                    <el-form-item label="BOM编号">
                        <el-input v-model="form_create.bomNo"></el-input>
                    </el-form-item>
                    <el-form-item label="BOM版本">
                        <el-input v-model="form_create.bomVersion"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form_create.remark"></el-input>
                    </el-form-item>
                </div>
            
                <div class="lkh_table">
                    <div class="lkh_table_title">工艺BOM物料</div>
                    <div class="lkh_table_titles">
                         <div>物料种类</div>
                         <div>物料名称</div>
                         <div>物料编码</div>
                         <div>供应商</div>
                         <div>型号规格</div>
                         <div>等级</div>
                         <div>物料数量</div>
                         <div>物料单位</div>
                         <div>备注</div>
                         <div>操作 <i class="el-icon-plus plus" @click="handleAddinput"></i></div>
                    </div>
                    <div class="lkh_table_con" v-for='(item,index) of inputList' :key="index">
                        <div>
                            <!-- <input type="text" class="lkh_input" v-model="item.materielType"> -->
                            <el-select v-model="item.materielTypeId"  placeholder="请选择" style="width:80px;" class="lkh_select">
                                <el-option  v-for="items in options"  :key="items.value" :label="items.typeName" :value="items.id" style="width:80px">
                                </el-option>
                            </el-select>
                        </div>
                        <div><input type="text" class="lkh_input" v-model="item.materielName"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielNo"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielSupplier"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielNorms"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielLevel"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielNumber"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielUnit"></div>
                        <div><input type="text" class="lkh_input" v-model="item.remark"></div>
                        <div @click="handleDeleteinput(index)"><i class="el-icon-minus minus"></i></div>
                    </div>

                </div>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitCreateForm">确定</el-button>
                <el-button @click="create_visible = false">取消</el-button>
            </div>
        </el-dialog>

        <!--编辑-->
        <el-dialog title="编辑工艺BOM" :visible.sync="edit_visible" class="jc_dialog_wrap lkh"
        >
            <el-form :model="form_edit" label-width="120px">
                <div class="clearfloat">
                    <el-form-item label="BOM名称">
                        <el-input v-model="form_edit.bomName"></el-input>
                    </el-form-item>
                    <el-form-item label="BOM编号">
                        <el-input v-model="form_edit.bomNo"></el-input>
                    </el-form-item>
                    <el-form-item label="BOM版本">
                        <el-input v-model="form_edit.bomVersion"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form_edit.remark"></el-input>
                    </el-form-item>
                </div>
                <div class="lkh_table">
                    <div class="lkh_table_title">工艺BOM物料</div>
                    <div class="lkh_table_titles">
                         <div>物料种类</div>
                         <div>物料名称</div>
                         <div>物料编码</div>
                         <div>供应商</div>
                         <div>型号规格</div>
                         <div>等级</div>
                         <div>物料数量</div>
                         <div>物料单位</div>
                         <div>备注</div>
                         <div>操作 <i class="el-icon-plus plus" @click="handleAddChangeinput"></i></div>
                    </div>
                    <div class="lkh_table_con" v-for='(item,index) of changeList' :key="index">
                        <div>
                            <el-select v-model="item.materielTypeId"  placeholder="请选择" style="width:80px;" class="lkh_select">
                                <el-option  v-for="items in options"  :key="items.value" :label="items.typeName" :value="items.id" style="width:80px">
                                </el-option>
                            </el-select>
                        </div>
                        <div><input type="text" class="lkh_input" v-model="item.materielName"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielNo"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielSupplier"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielNorms"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielLevel"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielNumber"></div>
                        <div><input type="text" class="lkh_input" v-model="item.materielUnit"></div>
                        <div><input type="text" class="lkh_input" v-model="item.remark"></div>
                        <div @click="handleDeleteChangeinput(index)"><i class="el-icon-minus minus"></i></div>
                    </div>

                </div>                

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitEditForm">确定</el-button>
                <el-button @click="edit_visible=false">取消</el-button>
            </div>
        </el-dialog>   



	</div>
</template>
<script>
import * as Technics from "../../api/process/technicsbom";
import * as MaterialType from "../../api/process/materialTypes";


export default{
    data () {
    	return {
    		searchList:{
                pageSize:'',
                pageNum:''
            },
    		list2:[],
            list:[],
            multipleSelection: [],
    		total:0,
    		currentPage:1,
    		pageSize:10,
            create_visible:false,
            edit_visible:false,
            form_create:{},
            form_edit:{},
            inputList:[],
            inputObj:{},
            Obj:{
                materielTypeId:'',
                materielName:'',
                materielNo:'',
                materielSupplier:'',
                materielNorms:'',
                materielLevel:'',
                materielNumber:'',
                materielUnit:'',
                remark:''
            },
            options: [],
            changeList:[],
            currentRow:'',

            
    	}
    },
    created() {
      this.fetchData();
      
    },
    methods:{
       fetchData(p) {
            this.listLoading = true;
            this.searchList.pageNum = this.currentPage = p;
            this.searchList.pageSize = this.pageSize;
            // console.log(this.searchList)
            Technics.getList(this.searchList).then(data => {
                console.log(data)
              this.list = data.rows;
              this.total = parseInt(data.total);
              this.listLoading = false;
            })
        },
        //加载 新建 下拉框
        loadmaterialList(){
            MaterialType.getList({}).then(data => {
                // console.log(data)
                this.options = data.rows;
            })
        },
    	//查询
    	searchRows () {
            this.fetchData()
    	},
    	//查询清空
    	emptyInputs () { 
            this.searchList = {};
            this.fetchData()
    	},
    	//表格行新建
    	createRow () {
            this.create_visible = true;
            this.form_create = {}  
            this.loadmaterialList()
            this.inputList=[]
            // this.handleAddinput ()
    	},
      // handleCreateClose(){
      //  //新建表格取消
        
      //   this.form_create = {}
      // },
        //表格新建完成后，提交
        submitCreateForm () {
            for(let i=0;i<this.inputList.length;i++){
               this.form_create['bomMaterielDtos['+ i +'].materielTypeId'] = this.inputList[i].materielTypeId;
               this.form_create['bomMaterielDtos['+ i +'].materielName'] = this.inputList[i].materielName;
               this.form_create['bomMaterielDtos['+ i +'].materielNo'] = this.inputList[i].materielNo;
               this.form_create['bomMaterielDtos['+ i +'].materielSupplier'] = this.inputList[i].materielSupplier;
               this.form_create['bomMaterielDtos['+ i +'].materielNorms'] = this.inputList[i].materielNorms;
               this.form_create['bomMaterielDtos['+ i +'].materielLevel'] = this.inputList[i].materielLevel;
               this.form_create['bomMaterielDtos['+ i +'].materielNumber'] = this.inputList[i].materielNumber;
               this.form_create['bomMaterielDtos['+ i +'].materielUnit'] = this.inputList[i].materielUnit;
               this.form_create['bomMaterielDtos['+ i +'].remark'] = this.inputList[i].remark;
            }

            Technics.createRow(this.form_create).then( data => {
               this.create_visible = false;
               this.form_create = {}  
               this.fetchData();
            }).catch((a)=>{
                console.log("a",a)
            })
        },
    	//表格行编辑
    	editRow () {
            if(this.multipleSelection.length === 0) {
                  this.$message({
                    type:'warning',
                    message:'请先勾选行'
                  }) 
            }else if(this.multipleSelection.length >= 2) {
                   this.$message({
                    type:'warning',
                    message:'每次最多勾选一行'
                  })  
            }else if(this.multipleSelection.length === 1){
                   this.edit_visible = true;
              Technics.materielsList({id:this.multipleSelection[0].id}).then((data)=>{
                 
                 this.changeList = data.rows;
                 this.loadmaterialList();
              })
              this.form_edit.id =this.multipleSelection[0].id;
              this.form_edit.bomName = this.multipleSelection[0].bomName;
              this.form_edit.bomNo = this.multipleSelection[0].bomNo;
              this.form_edit.bomVersion = this.multipleSelection[0].bomVersion;
              this.form_edit.remark = this.multipleSelection[0].remark;
              console.log(this.form_edit)

            }
    	},
        //表格编辑完成后，提交
        submitEditForm () {
            for(let i=0; i<this.changeList.length;i++){
                this.form_edit['bomMaterielDtos['+ i +'].materielTypeId']   = this.changeList[i].materielTypeId;
                this.form_edit['bomMaterielDtos['+ i +'].materielName']     = this.changeList[i].materielName;
                this.form_edit['bomMaterielDtos['+ i +'].materielNo']       = this.changeList[i].materielNo;
                this.form_edit['bomMaterielDtos['+ i +'].materielSupplier'] = this.changeList[i].materielSupplier;
                this.form_edit['bomMaterielDtos['+ i +'].materielNorms']    = this.changeList[i].materielNorms;
                this.form_edit['bomMaterielDtos['+ i +'].materielLevel']    = this.changeList[i].materielLevel;
                this.form_edit['bomMaterielDtos['+ i +'].materielNumber']   = this.changeList[i].materielNumber;
                this.form_edit['bomMaterielDtos['+ i +'].materielUnit']     = this.changeList[i].materielUnit;
                this.form_edit['bomMaterielDtos['+ i +'].remark']           = this.changeList[i].remark; 
            }

            Technics.editRow(this.form_edit).then( data => {
               this.edit_visible = false;
               this.fetchData(this.currentPage);
            }).catch((a)=>{
                console.log("error",a)
            })

            // console.log(this.form_edit)       

        },
    	//表格行删除
    	deleteRow () {
            if(this.multipleSelection.length === 0) {
                  this.$message({
                    type:'warning',
                    message:'请先勾选行'
                  }) 
                }else if(this.multipleSelection.length >= 2) {
                   this.$message({
                    type:'warning',
                    message:'每次最多勾选一行'
                  }) 
                }else if(this.multipleSelection.length === 1){
                  this.$confirm('是否删除该条数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    Technics.deleteRows(this.multipleSelection[0].id).then(data => {
                      this.fetchData(this.currentPage);
                      this.$message({
                        type: 'success',
                        message: '删除成功!'
                      });
                    })

                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消删除'
                    });
                  });

                }
    	},
    	//表格选中行，触发事件
    	handleSelectionChange (val) {
    		 this.multipleSelection = val;
             this.currentRow = this.multipleSelection[this.multipleSelection.length-1]
             if(this.currentRow){
                this.showMaterielsList(this.currentRow.id)
             }
    	},
        showMaterielsList(id){
            Technics.materielsList({id:id}).then((data) =>{
                   this.list2 = data.rows
                   console.log(data.rows)
               }).catch(()=>{
                  console.log('没有找到数据')
               })
                            
        },
    	handleSizeChange (val) {
             //改变分页系统 每页条数时触发
            this.pageSize = val;
            this.currentPage = 1;
            this.fetchData(1);

    	},
    	changePage (p) {
            //改变 分页系统 当前页数 的时候 触发
            this.fetchData(p)
    	},
        handleAddinput () {

            this.loadmaterialList();
            var copy = Object.assign({}, this.Obj);
            this.inputList.push(copy)
        },
        handleAddChangeinput () {
            this.loadmaterialList();
            var copy = Object.assign({}, this.Obj);
            this.changeList.push(copy)
        },
        handleDeleteinput (index){
            //删除弹出框一行
            console.log(index)
            this.inputList.splice(index,1)
            console.log(this.inputList)
        },
        handleDeleteChangeinput (index) {
            console.log(index)
            this.changeList.splice(index,1)
            console.log(this.changeList)
        }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)/2
        return tableHeight;
      }
    }
}
</script>
<style scoped>
.clearfloat{
    overflow: hidden;
}
.lkh_table{
    width:1000px;
    margin-left: -10px;
    margin-right:-10px;
    font-size:14px;
    font-weight: bold;
    margin-top: 5px;
}
.lkh_table_title{
    height: 40px;
    line-height: 40px;
    background: #1296db;
    padding-left: 20px;
    box-sizing: border-box;
    color:#fff;
}
.lkh_table_titles,
.lkh_table_con{
    height: 40px;
    line-height: 40px;
 /*   box-sizing: border-box;
    padding: 0 20px;*/
    display: flex;
    justify-content: space-between;
    align-items: center;    

}
.lkh_table_titles{
    background: #eee;
    border:1px solid #bbb;
    color:#606266;
}
.lkh_table_con{
    border-bottom: 1px solid #bbb;
}
.lkh_table_titles>div,
.lkh_table_con>div{
   border-right:1px solid #bbb;
   width: 10%;
   text-align: center;
}
.lkh_table_titles>div:last-child,
.lkh_table_con>div:last-child{
   border:none;
}

.el-icon-plus.plus{
    background: #67C23A;
    border-radius: 50%;
    color:#fff;
    padding: 4px;
    cursor: pointer;
}   
.lkh_input{
    width: 70px;
    height: 30px;
    outline: none;
    border:1px solid #aaa;
    border-radius: 4px;

}
.el-icon-minus.minus{
    background: #F56C6C;
    padding: 4px;
    border-radius: 50%;
    color:#fff;
}

</style>